<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01.react初体验</title>
    <!--1、引入react核心文件:说明在全局环境中window对象下增加了一个属性React，值为一个对象-->
    <script src="./js/react.development.js"></script>
    <!--2、引入reactdom文件:说明在全局环境中window对象下增加了一个属性ReactDOM,值也是一个对象-->
    <script src="./js/react-dom.development.js"></script>
</head>

<body>
    <!--3、创建容器元素，目的是为了将内容渲染进来-->
    <div id="root"></div>
    <script>
        //查看React对象的结构
        // console.dir(React);
        //查看ReactDOM对象的结构
        // console.dir(ReactDOM);

        //在JS阶段，想要在元素中添加内容
        /* let root = document.querySelector('#root');
        root.innerHTML = '尚硅谷';
        root.innerHTML = '京东';
        root.innerHTML = '淘宝'; */

        //在React阶段
        //1、创建一个根容器元素
        // let root = ReactDOM.createRoot(document.getElementById('root'));
        // console.log(root);
        // //2、通过根容器元素调用原型对象中的render方法来进行渲染内容
        // root.render('尚硅谷');
    </script>
</body>

</html>